<template>
	<view>
		<view class="button-wrap">
			<view class="form">
				<image :src="iconPath" @click="updateImage()" mode="aspectFill"
					style="width: 150rpx; height: 150rpx; margin: 20rpx; border-radius: 75rpx;"></image>
				<button @click="chooseImage()">
					预览图片
				</button>
				<button @click="downLoad()">
					下载
				</button>
			</view>
			<navigator url="/pages/demos/login/login" open-type="redirect">
				<button type="default">登录注册页</button>
			</navigator>
			<navigator url="/pages/demos/cityexploration/cityexploration" open-type="navigate">
				<button type="default">城市探索</button>
			</navigator>
			<navigator url="/pages/demos/news/news" open-type="navigate">
				<button type="default">新闻</button>
			</navigator>
			<navigator url="/pages/demos/zjcz/IntentPage/IntentPage" open-type="navigate">
				<button type="default">组件传值</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconPath: "/static/logo.png",
				chooseImages: []
			}
		},
		methods: {
			updateImage() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						this.iconPath = res.tempFilePaths[0];
						this.chooseImages = res.tempFilePaths;
						uni.previewImage({
							urls: res.tempFilePaths,
						});
					}
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 2,
					sourceType: ['album'],
					success: (res) => {
						// 预览图片
						uni.previewImage({
							urls: res.tempFilePaths,
						});
					}
				});
			},
			downLoad(){
				const imagetask = uni.downloadFile({
					url: "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							uni.previewImage({
								urls: [res.tempFilePath]
							});
							this.iconFilePath = res.tempFilePath;
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
					}
				});
				// 监听下载进度
				imagetask.onProgressUpdate((res) => {
					console.log('下载进度:', res.progress + "%"); // 进度百分比
					console.log('已下载:', res.totalBytesWritten);
					console.log('总大小:', res.totalBytesExpectedToWrite);
				});
			}

		}
	}
</script>

<style>
	.button-wrap {
		padding: 30rpx 30rpx;
	}

	.form {
		border-radius: 30rpx;
		background: #00ffff;
	}
</style>